<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="[[ url_for('core-static', path='/core.css') ]]">
    <link rel="stylesheet" href="[[ url_for('core-static', path='/auth/auth.css') ]]">
</head>
<body>
    <form action="/auth/login" method="POST">
        <img id="logo" src="[[ url_for('core-static', path='/img/logo.svg') ]]">
        <div class="error-message">
            [[ error_message ]]
        </div>
        <div>
            <input type="text" id="username" name="username" oninput="toggleButtonColor()" required autofocus placeholder="Username">
        </div>
        <div>
            <input type="password" id="password" name="password" oninput="toggleButtonColor()" required placeholder="Password">
        </div>
        <div>
            <input type="hidden" name="referer" value="[[ referer ]]">
        </div>
        <div>
            <button type="submit" id="submitLogin">Login</button>
        </div>
        {% if show_default_passwords %}
            Default users included out of the box:
            <ul>
                <li>admin:admin</li>
                <li>user:user</li>
            </ul>
            Change their passwords after initial login as admin.    
        {% endif %}
        <div>
        </div>
    </form>


<script>
    function toggleButtonColor() {
            const button = document.getElementById('submitLogin');
            const usernameValue = document.getElementById('username').value;
            const passwordValue = document.getElementById('password').value;

            if (usernameValue !== "" && passwordValue != "") {
                button.disabled = false;
                button.classList.add('active');
            } else {
                button.disabled = true;
                button.classList.remove('active');

            }
        }
</script>
</body>


</html>